<!--多选组-->
<template>
  <el-checkbox-group
    v-model="checkValue"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :clearable="clearable"
  >
    <el-checkbox
      v-for="item in optionList"
      v-bind="$attrs"
      :key="'check' + item.value"
      :label="item.value"
      :disabled="item.disabled"
    >
      {{item.label}}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue'
  // import { ElCheckbox, ElCheckboxGroup } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController, loadController } from '../map'

  export default defineComponent({
    name: 'nf-el-from-item-checkboxs',
    inheritAttrs: false,
    components: {
      // ElCheckbox, ElCheckboxGroup
    },
    props: {
      ...itemProps, // 基础属性
      colName: String, // 变更字段名称
      modelValue: [Array]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const { value } = itemController(props, context.emit)

      const checkValue = computed({
        set: (v) => { value.value = v },
        get: () => {
          if (typeof value.value !== 'object') {
            return []
          }
          return value.value
        }
      })

      // 从后端获取数据
      const { loadDict } = loadController(props)
      loadDict()

      return {
        checkValue
      }
    }
  })
</script>
